<template>
  <div>
      <!-- v-bind动态绑定class属性 -->
      <!-- 1.直接绑定 -->
      <p :class="classActive">xxx</p>
      <!-- 2.三元绑定 -->
      <p :class="isActive?'active':''">xxx</p>
      <!-- 3.对象绑定 -->
      <p :class="{active:isActive}">xxx</p>
  </div>
</template>

<script>
export default {
    data(){
       return{
        classActive:'active',
        isActive:'true'
       }
    }
}
</script>

<style>

</style>